<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width,user-scalable=no, initial-scale=1.0"/>
    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
    <title>首页</title>
    <link rel="stylesheet" href="css/base.css"/>
    <link rel="stylesheet" href="css/index.css"/>
    <script src="js/common.js"></script>
    <script src="js/index.js"></script>
    <!--    <script src="js/test.js"></script>-->
</head>
<body>
<div class="hm_layout"></div>
<!--搜索头部-->
<header class="hm_header">
    <div class="hm_header_box">
        <a href="" class="icon_logo"></a>
        <!--搜索按钮-->
        <form action="#">
            <span class="icon_search"></span>
            <!--失误：input不能放在span中-->
            <input type="search" placeholder="提示占位"/>
        </form>
        <a href="#" class="login">登录</a>
    </div>
</header>
<!--轮播图-->
<div class="hm_banner">
    <ul class="clearfix">
        <li>
            <a href="#"><img src="images/images/l8.jpg" alt=""/></a>
        </li>
        <li>
            <a href="#"><img src="images/images/l1.jpg" alt=""/></a>
        </li>
        <li>
            <a href="#"><img src="images/images/l2.jpg" alt=""/></a>
        </li>
        <li>
            <a href="#"><img src="images/images/l3.jpg" alt=""/></a>
        </li>
        <li>
            <a href="#"><img src="images/images/l4.jpg" alt=""/></a>
        </li>
        <li>
            <a href="#"><img src="images/images/l5.jpg" alt=""/></a>
        </li>
        <li>
            <a href="#"><img src="images/images/l6.jpg" alt=""/></a>
        </li>
        <li>
            <a href="#"><img src="images/images/l7.jpg" alt=""/></a>
        </li>
        <li>
            <a href="#"><img src="images/images/l8.jpg" alt=""/></a>
        </li>
        <li>
            <a href="#"><img src="images/images/l1.jpg" alt=""/></a>
        </li>
    </ul>
    <ul>
        <li class="now"></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>
<!--导航栏-->
<nav class="hm_nav">
    <ul class="clearfix">
        <li>
            <a href="#">
                <img src="images/images/nav0.png" alt=""/>
                <p>分类查询</p>
            </a>
        </li>
        <li>
            <a href="#">
                <img src="images/images/nav1.png" alt=""/>
                <p>黑马超市</p>
            </a>
        </li>
        <li>
            <a href="#">
                <img src="images/images/nav2.png" alt=""/>
                <p>购物车</p>
            </a>
        </li>
        <li>
            <a href="#">
                <img src="images/images/nav3.png" alt=""/>
                <p>个人中心</p>
            </a>
        </li>
        <li>
            <a href="#">
                <img src="images/images/nav4.png" alt=""/>
                <p>充值中心</p>
            </a>
        </li>
        <li>
            <a href="#">
                <img src="images/images/nav5.png" alt=""/>
                <p>黑马理财</p>
            </a>
        </li>
        <li>
            <a href="#">
                <img src="images/images/nav6.png" alt=""/>
                <p>黑马培训</p>
            </a>
        </li>
        <li>
            <a href="#">
                <img src="images/images/nav7.png" alt=""/>
                <p>黑马圈子</p>
            </a>
        </li>
    </ul>
</nav>
<!--商品-->
<main class="hm_product">
    <!--商品主盒子-->
    <section class="product_box hm_sk">
        <!--头部-->
        <div class="product_box_tit no_border">
            <div class="f_left m_l10">
                <span class="sk_icon"></span>
                <span class="sk_name m_l10">掌上秒杀</span>
                <div class="sk_time m_l10">
                    <span>0</span>
                    <span>0</span>
                    <span>:</span>
                    <span>0</span>
                    <span>0</span>
                    <span>:</span>
                    <span>0</span>
                    <span>0</span>
                </div>
            </div>
            <div class="f_right m_r10"><a href="#">更多></a></div>
        </div>
        <!--内容-->
        <div class="product_box_con">
            <ul class="clearfix">
                <li>
                    <a href="#"><img src="images/images/detail01.jpg" alt=""/></a>
                    <p>&yen;10.00</p>
                    <p>&yen;100.00</p>
                </li>
                <li>
                    <a href="#"><img src="images/images/detail02.jpg" alt=""/></a>
                    <p>&yen;10.00</p>
                    <p>&yen;100.00</p>
                </li>
                <li>
                    <a href="#"><img src="images/images/detail02.jpg" alt=""/></a>
                    <p>&yen;10.00</p>
                    <p>&yen;100.00</p>
                </li>
            </ul>
        </div>
    </section>
    <!--商品子盒子-->
    <section class="product_box">
        <!--头部-->
        <div class="product_box_tit">
            <h3>黑马超市</h3>
        </div>
        <!--内容-->
        <div class="product_box_con clearfix">
            <a href="#" class="f_left w_50 b_right">
                <img src="images/images/cp1.jpg" alt=""/>
            </a>
            <a href="#" class="f_right w_50 b_bottom">
                <img src="images/images/cp2.jpg" alt=""/>
            </a>
            <a href="#" class="f_right w_50">
                <img src="images/images/cp3.jpg" alt=""/>
            </a>
        </div>
    </section>
    <!--商品子盒子-->
    <section class="product_box">
        <!--头部-->
        <div class="product_box_tit">
            <h3>黑马超市</h3>
        </div>
        <!--内容-->
        <div class="product_box_con clearfix">
            <a href="#" class="f_right w_50 b_left">
                <img src="images/images/cp4.jpg" alt=""/>
            </a>
            <a href="#" class="f_left w_50 b_bottom">
                <img src="images/images/cp5.jpg" alt=""/>
            </a>
            <a href="#" class="f_left w_50">
                <img src="images/images/cp6.jpg" alt=""/>
            </a>
        </div>
    </section>
    <!--商品子盒子-->
    <section class="product_box">
        <!--头部-->
        <div class="product_box_tit">
            <h3>黑马超市</h3>
        </div>
        <!--内容-->
        <div class="product_box_con clearfix">
            <a href="#" class="f_left w_50 b_right">
                <img src="images/images/cp1.jpg" alt=""/>
            </a>
            <a href="#" class="f_right w_50 b_bottom">
                <img src="images/images/cp2.jpg" alt=""/>
            </a>
            <a href="#" class="f_right w_50 b_right">
                <img src="images/images/cp3.jpg" alt=""/>
            </a>
        </div>
    </section>
</main>
</body>
</html>
